<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        template: `
          <div @click="handleClick">
            {{name}}
          </div>
        `,
        setup(){
            /**
             * beforeCreated()
             * created()是没有的。因为setup执行的时间是在beforeCreated和created之间
             * onRenderTracked() 重新渲染完，都会重新搜集依赖，这时就会执行onRenderTracked
             * onRenderTriggered() 每次重新渲染被触发的时候
             */
            const {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onRenderTriggered,onRenderTracked} = Vue;
            const name = ref('dell')
            onBeforeMount(()=>{
                console.log('onBeforeMount')
            });
            onMounted(()=>{
                console.log('onMounted...')
            });
            onBeforeUpdate(()=>{
                console.log('onBeforeUpdate')
            });
            const handleClick = ()=>{
                name.value = 'lee'
            };
            onUpdated(()=>{
                console.log('onUpdated')
            });
            onBeforeUnmount(()=>{
                console.log('onBeforeUnmount')
            });
            // 每次渲染后重新收集响应式依赖
            onRenderTracked(()=>{
                console.log('onRenderTracked')
            });
            // 每次触发页面重新渲染时自动执行
            onRenderTriggered(()=>{
                console.log('onRenderTriggered')
            })
            return {name,handleClick}
        }
    });
    const vm = app.mount("#app");
</script>
</body>
</html>